<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            // var n=prompt("请选择你想要的li")*1;//3
            // $("li:eq("+(n-1)+")").css("background","red");
            //eq()方法
            // $("li").eq(n-1).css("background","green");

            //first()和last()
            // $("li").first().css("background","red");
            // $("li").last().css("background","yellow");

            // filter()方法对当前选中元素进行筛选过滤
            // $("li").filter(".hello").css("background","purple");

            //find()在当前元素内部进行查找
            $("ul").find(".hello").css("background","pink");

            //data()和removeData()在元素上存放数据和移除数据
            //存放数据
            $("ul").data("name","tom");
            $("ul").data("age",20);
            //根据属性名删除数据
            $("ul").removeData("name");
            //根据属性名获取数据
            console.log($("ul").data("name"));
            console.log($("ul").data("age"));

        });
    </script>
</head>
<body>
    <ul>
        <li>li01</li>
        <li class="hello">li02</li>
        <li>li03</li>
        <li>li04
            <span class="hello">span</span>
        </li>
        <li>li05</li>
    </ul>
</body>
</html>